import React, {
    Component,
} from 'react';

import {
    StyleSheet,
    Text,
    View,
    Platform,
    FlatList,
    Dimensions,
    TouchableOpacity,
    Image,
    ScrollView,
    StatusBar,
    Linking,
    ActivityIndicator,
    DeviceEventEmitter,
    TextInput,
} from 'react-native';

import Loading from "../../utils/Loading";
import CodeVerifyView from './CodeVerifyView'
import AndroidModule from "../../utils/AndroidConnent";
import HttpUtils from "../../utils/HttpUtils";
import HttpUrls from "../../utils/HttpUrls";
import Header from "../../components/header";
import Constant from '../../utils/Constant'//全局变量
import { ToastToUser } from "../../utils/CustomToast";

const screenW = Dimensions.get('window').width;
const screenH = Dimensions.get('window').height;
const isIos = Platform.OS == 'ios';

let time = 60

let navigation;

export default class AccountLogOffSubmit extends Component {

    constructor(props) {
        super(props);
        this.state = {
            countDown: '',
            mobile: '',
            verifyCode: '',
            showVerifyCodePop: false,
            imageData: '',
            captchaKey: '',
            authCode: '',
        }
    }

    componentWillMount() {

    }

    componentWillUnmount() {
        clearInterval(this.timer)
    }

    componentDidMount() {
        let showMobile = Constant.userInfo.phone.substring(0, 3) + '****' + Constant.userInfo.phone.substring(7);
        this.setState({
            mobile: showMobile
        })
    }

    componentWillUnmount() {

    }

    timeCountDown() {
        if (this.timer) {
            return
        }
        this.setState({
            countDown: time
        })
        this.timer = setInterval(() => {
            let countDown = this.state.countDown
            countDown -= 1;
            this.setState({
                countDown: countDown
            })
            if (countDown == 0) {
                this.setState({
                    countDown: ''
                })
                clearInterval(this.timer)
                this.timer = null
            }

        }, 1000);
    }

    refreshVerifyCode() {
        if (this.timer) {
            return
        }
        this.setState({
            showVerifyCodePop: true
        }, function () {
            this.requestPicCode()
        })
    }

    requestPicCode() {
        HttpUtils.getRequest(HttpUrls.picCodeCreate, { phone: Constant.userInfo.phone })
            .then((result) => {
                let code = result.code
                if (code == 0) {
                    let data = result.data
                    let imageData = data.imageData
                    this.setState({
                        imageData: 'data:image/png;base64,' + imageData,
                        captchaKey: data.captchaKey
                    })
                }
            })
            .catch((error) => {

            });
    }

    sendAuthorCode() {
        let param = {
            captchaKey: this.state.captchaKey,
            captchaValue: this.state.authCode,
            phone: Constant.userInfo.phone,
            type: '19',
        }
        if (this.Loading) {
            this.Loading.show();
        }
        HttpUtils.postRequest(HttpUrls.sendAuthorCode, param)
            .then((result) => {
                if (this.Loading) {
                    this.Loading.hide();
                }
                let code = result.code
                if (code == 0) {
                    this.setState({
                        showVerifyCodePop: false
                    })
                    this.timeCountDown()
                    ToastToUser('验证码已经发送,请注意查收')
                }
            })
            .catch((error) => {
                if (this.Loading) {
                    this.Loading.hide();
                }
            });
    }

    render() {
        navigation = this.props.navigation
        return (
            <View style={styles.container}>
                <Header navigation={navigation} Title={'账号注销'} />
                

                <Image style={styles.warnIcon} source={require('source/image/comm/warn_icon.png')} />
                <Text style={styles.warnText}>正在验证绑定手机</Text>

                <View style={styles.mobileBox}>
                    <Text style={styles.mobileText}>手机号</Text>
                    <TextInput
                        style={styles.textInput}
                        placeholder='请输入手机号码'
                        keyboardType='phone-pad'
                        placeholderTextColor="#999999"
                        maxLength={11}
                        editable={false}
                        value={this.state.mobile}
                    />
                </View>

                <View style={[styles.mobileBox, { marginTop: 30 }]}>
                    <Text style={styles.mobileText}>验证码</Text>
                    <TextInput
                        style={styles.textInput}
                        placeholder='请输入验证码'
                        keyboardType='phone-pad'
                        placeholderTextColor="#999999"
                        selectionColor={'#ff6600'}
                        maxLength={11}
                        value={this.state.verifyCode}
                        onChangeText={this.onCodeChangeText}
                    />
                    <TouchableOpacity
                        activeOpacity={0.8}
                        style={styles.verCodeBox}
                        onPress={() => {
                            this.refreshVerifyCode()
                        }}
                    >
                        <Text style={styles.verCodeText}>{this.state.countDown == '' ? '获取验证码' : this.state.countDown + '秒后重发'}</Text>
                    </TouchableOpacity>
                </View>


                <TouchableOpacity
                    style={[styles.logoffBtn, { bottom: Constant.bottomHeight + 10, backgroundColor: this.state.verifyCode ? '#ED542E' : '#F5F5F5' }]}
                    activeOpacity={0.8}
                    onPress={() => {
                        this.clickLogoOff()
                    }}
                >
                    <Text style={[styles.logoffText, { color: this.state.verifyCode ? '#FFFFFF' : '#999999' }]}>确认注销账号</Text>
                </TouchableOpacity>

                {
                    this.state.showVerifyCodePop ?
                        <View style={styles.codeVerifyView}>
                            <CodeVerifyView
                                imageData={this.state.imageData}
                                closeHandler={() => {
                                    this.setState({
                                        showVerifyCodePop: false
                                    })

                                }}
                                refreshCodeHandler={() => {
                                    this.requestPicCode()
                                }}
                                submitCodeHandler={(authCode) => {
                                    this.setState({
                                        authCode: authCode
                                    }, function () {
                                        this.sendAuthorCode()
                                    })
                                }}
                            />
                        </View>
                        :
                        null
                }

                <Loading onRef={(ref) => (this.Loading = ref)} />

            </View>
        );
    }

    onCodeChangeText = (value) => {
        this.setState({
            verifyCode: value
        })
    }

    clickLogoOff() {
        if (!this.state.verifyCode) {
            ToastToUser('请输入验证码')
            return;
        }
        if (this.Loading) {
            this.Loading.showWithDesc('');
        }
        let param = {
            userId: Constant.userInfo.userId,
            authorCode: this.state.verifyCode,
            authorType: 1,
            source: isIos ? '15' : '14'
        }
        HttpUtils.postRequest(HttpUrls.unregisterUser, param)
            .then((result) => {
                if (this.Loading) {
                    this.Loading.hide();
                }
                let code = result.code
                if (code == 0) {
                    ToastToUser('账号注销成功')
                    setTimeout(() => {
                        AndroidModule.logOffSuccess()
                    }, 1000);
                } else {
                    ToastToUser(result.msg)
                }
            })
            .catch((error) => {
                if (this.Loading) {
                    this.Loading.hide();
                }
            });
    }

}

const styles = StyleSheet.create({
    container: {
        flex: 1,
        flexDirection: 'column',
        alignItems: 'center',
    },
    warnIcon: {
        marginTop: 33,
        width: 85,
        height: 85
    },
    warnText: {
        marginTop: 39,
        marginBottom: 60,
        color: '#333333',
        fontSize: 18,
        fontWeight: '600'
    },
    mobileBox: {
        width: '100%',
        paddingHorizontal: 15,
        flexDirection: 'column',
        justifyContent: 'flex-start',
        alignItems: 'flex-start'
    },
    mobileText: {
        width: '100%',
        color: '#696969',
        fontSize: 14
    },
    textInput: {
        width: '100%',
        color: '#333333',
        fontSize: 14,
        height: 45,
        borderBottomColor: '#E4E4E4',
        borderBottomWidth: 1,
    },

    verCodeBox: {
        position: 'absolute',
        right: 15,
        bottom: 8,
        width: 70,
        height: 28,
        backgroundColor: '#FFDB1B',
        borderRadius: 4,
        justifyContent: 'center',
        alignItems: 'center'
    },
    verCodeText: {
        color: '#222222',
        fontSize: 12
    },

    logoffBtn: {
        position: 'absolute',
        width: '90%',
        height: 45,
        borderRadius: 4,
        justifyContent: 'center',
        alignItems: 'center'
    },
    logoffText: {
        fontSize: 15
    },
    codeVerifyView: {
        position: 'absolute',
        top: 0,
        bottom: 0,
        left: 0,
        right: 0,
        zIndex: 1000,
    },
})